<template>
    <div class="mine">
        <div class="mine-header">
            <img :src="oneUrl" />
            <span>张小雨</span>
        </div>
        <div class="column">
            <div class="line"></div>
            <div class="box">               
                <div @click="linkTo('1')">
                    <img :src="mineUrl" />
                    <span>我的档案</span>
                </div>
                <div @click="linkTo('2')">
                    <img :src="helthyUrl" />
                    <span>健康信息</span>
                </div>
                <div @click="linkTo('3')">
                    <img :src="friendsUrl" />
                    <span>亲朋信息</span>
                </div>
            </div>
            <div class="line"></div>
            <div class="box">                
                <div @click="linkTo('4')">
                    <img :src="historyUrl" />
                    <span>服务记录</span>
                </div>
                <div>
                    <img :src="orderUrl" />
                    <span>我的账单</span>
                </div>
            </div>
            <div class="line"></div>
            <div class="box">               
                <div @click="linkTo('6')">
                    <img :src="feedbackUrl" />
                    <span>意见反馈</span>
                </div>          
            </div>
        </div>
        <div class="mine-footer">
            <div @click="linktoEMKnowledge">
                <img :src="EMKnowledge_2">
                <span>胸痛知识</span>
            </div>
            <div @click="linktoEMFun">
                <img :src="EMFun_2">
                <span>一键呼救</span>
            </div>
            <div>
                <img :src="EMMine_1">
                <span class="active">我的</span>
            </div>
        </div>
        <!-- <div class="row-vc mine-footer">技术支持--苏州极致医疗技术有限公司</div> -->
    </div>
</template>
<script>
const feedbackUrl = require('@/assets/img/mine/feedbackhdpi.png')
const friendsUrl = require('@/assets/img/mine/friendshdpi.png')
const helthyUrl = require('@/assets/img/mine/helthyhdpi.png')
const historyUrl = require('@/assets/img/mine/historyhdpi.png')
const mineUrl = require('@/assets/img/mine/minehdpi.png')
const orderUrl = require('@/assets/img/mine/orderhdpi.png')
const oneUrl = require('@/assets/img/mine_1hdpi.png')

const EMKnowledge_2 = require('@/assets/img/1-2hdpi.png')
const EMMine_1 = require('@/assets/img/3-1hdpi.png')
const EMFun_2 = require('@/assets/img/2-2hdpi.png')
import { MessageBox } from 'mint-ui'
export default {
    data () {
        return {
            EMKnowledge_2: EMKnowledge_2,
            EMFun_2: EMFun_2,
            EMMine_1: EMMine_1,
            feedbackUrl: feedbackUrl,
            friendsUrl: friendsUrl,
            helthyUrl: helthyUrl,
            historyUrl: historyUrl,
            mineUrl: mineUrl,
            orderUrl: orderUrl,
            oneUrl: oneUrl
        }
    },
    methods: {
        linktoEMKnowledge () {
            this.$router.push({ path: '/wxemknowledge2' })
        },
        linktoEMFun () {
            this.$router.push({ path: '/wxemfun' })
        },
        linkTo (type) {
            let id = this.LocalStorageUtil.getItem('patientId')
            if (type != 1 && !id) {
                MessageBox({
                    message: '请先填写我的档案，确定前往填写?',
                    showCancelButton: true
                }).then(res => {
                    if (res == 'confirm') {
                        this.$router.push({ path: '/wxemmine/myarchives'})
                    }
                })
            } else {
                switch (type) {
                    case '1': this.$router.push({ path: '/wxemmine/myarchives'})
                        break
                    case '2': this.$router.push({ path: '/wxemmine/myhealth'})
                        break
                    case '3': this.$router.push({ path: '/wxemmine/myfriends'})
                        break
                    case '4': this.$router.push({ path: '/wxemmine/myservice'})
                        break
                    case '6': this.$router.push({ path: '/wxemmine/myproposal'})
                        break
                }
            }
        }
    }
}
</script>
<style lang="stylus" scoped>
@import '../../assets/css/layout'
@import '../../assets/css/var'
.mine {
    height: 100%
    background: $lSilver
}
.mine-header {
    $column()
    $flex-ac()
    height: 3rem
    background: url('../../assets/img/background.png') no-repeat
    background-size: 100% 100%
    img {
        width: 1.6rem
        height: 1.6rem
        border: .02rem solid $green
        border-radius: .8rem
        margin: .4rem 0 .3rem 0
    }
    span {
        font-size: $text-font28
        color: $green
    }
}
.box {
    background: $White
    div {
        height 1.2rem
        border-bottom: 1px solid $dWhite
        $row()
        $flex-ac()
        img {
            width: 1rem
            height: 1rem
            margin: 0 .2rem 0 .4rem
        }
        span {
            font-size: $text-font28
            color: $elBlack
        }
    }    
}
.line {
    height: .2rem
    background: $lSilver
}
.mine-footer {
    width: 100%
    height: 1.2rem
    background: $White
    position: fixed
    bottom: 0
    border-top: 1px solid $dWhite
    z-index: 1000
    $row()
    div {
        flex: 1
        $column()
        $flex-vc()
        $flex-ac()
        img {
            width .8rem
            height: .8rem
        }
        span {
            font-size: $text-font21
            color: $elBlack
            &.active {
                color: $green
            }
        }
    }
}
</style>
